<template>
    <div class="container">
        <div class="main">
            <el-form :model="ruleForm"  label-width="100px" class="demo-ruleForm">
            <el-form-item label="招聘标题:" prop="total">
                <el-input v-model="ruleForm.total"></el-input>
            </el-form-item>
            <el-form-item label="职位:" prop="position">
                <el-input v-model="ruleForm.position"></el-input>
            </el-form-item>
            <el-form-item label="是否应聘:" prop="region">
                <el-select v-model="ruleForm.region" class="sel">
                    <el-option label="是" value="是" ></el-option>
                    <el-option label="否" value="否"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="应聘时间:" prop="work_require">
                <el-input v-model="ruleForm.work_require"></el-input>
            </el-form-item>
            <el-form-item label="账号:" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="姓名:">
                <el-input v-model="ruleForm.lead"></el-input>
            </el-form-item>
            <el-form-item label="手机:" >
                <el-input v-model="ruleForm.contact"></el-input>
            </el-form-item>
            
            <el-form-item label="" >
                 <!-- 富文本编辑器 -->
                <VueEditor :config="config" ref="vueEditor"  ></VueEditor>
                <!-- <el-input v-model="ruleForm.cause" class="text" type="vueEditor"></el-input> -->
            </el-form-item>
            <span class="btn">
                <el-button >取消</el-button>
                <el-button @click="resetForm" type="primary">确定</el-button>
            </span>
           
                

        </el-form>
        </div>
        
    </div>
</template>

<script>
export default {
    data(){
        return{
            ruleForm:{
                total:'',
                position:'',
                region:'',
                work_require:'',
                name:'',
                lead:'',
                contact:'',
                cause:''
            },
        }
    },
    methods:{
        async resetForm() {
            let { data: res } = await this.$axios.post("/volunteer/add",this.ruleForm);
            if (res.code != 200) return this.$message.error(res.message);
            this.$message.success(res.code);
        },
    }
}
</script>

<style lang="scss" scoped>
.container{
    position: absolute;
    width: 100%;
    height: 200%;
    background-color: #ddd;
    margin-left: -20px;
    margin-top: -20px;
}
.main{
    width: 40%;
    height: 60%;
    margin: 30px auto;
    background-color: white;
    border-radius: 5px;
    .btn{
    width: 80%;
    margin: 100px auto;
    display: flex;
    justify-content: center;
    }
}
 .el-form-item{
    width: 100%;
    box-shadow:-5px -8px 5px  skyblue ;
    .sel{
    width: 100%;
    margin: 0 auto;
    }
    .text{
        // height: 120px;
        // line-height: 120px;
        padding:60px 0;
        margin: 80px auto;
        background-color: red;
    }
}

</style>